<!--
  @author: 善良的YWJ
  @Created by shanliangdeYWJ on 2020/09/22 04:17:23
  @file: my-timer.vue
  @description:
  ==================
  时间轴 基于"vue-awesome-swiper": "3.1.3", swiper4.5.1
  http://dongjunhui.com/archives/66/
  [官方API文档](https://www.swiper.com.cn/api/start/new.html)
  [双向控制参考](https://blog.csdn.net/codipy/article/details/103708953)
 ==================
  @link [Github](https://github.com/shanliangdeYWJ)
-->

<template>
  <div class="my-timer">
    <!-- times -->
    <div class="time-box">
      <swiper id="time" ref="myTime" :options="timeOption">
        <swiper-slide
          class="swiper-no-swiping"
          @click.native="handleClickTimeSlide(index)"
          :class="activeIndex===index? 'active-nav':''"
          v-for="(item,index) in times"
          :key="index">
          <!-- 时间轴 -->
          <div class="point-box">
            <div class="text">{{item.time}}</div>
            <span></span>
          </div>
        </swiper-slide>
        <!-- <div class="swiper-pagination" slot="pagination"></div> -->
        <!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
        <!-- <div class="swiper-button-next" slot="button-next"></div> -->
      </swiper>
      <div class="line"></div>
    </div>
    <!-- 图片区盒子 -->
    <swiper id="picture" ref="myPicture" :options="pictureOption">
      <swiper-slide class="swiper-no-swiping" v-for="(item,index) in times" :key="index">
        <!-- 时间轴 -->
        <img :src="item.img_url" alt="">
        <div class="msg">
          <div class="title">{{item.time}}</div>
          <div class="content">{{item.event}}</div>
        </div>
      </swiper-slide>
      <!-- <div class="swiper-pagination" slot="pagination"></div> -->
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css';
// import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { swiper, swiperSlide } from 'vue-awesome-swiper/src/index';

export default {
  name: 'myTimer',
  components: { swiper, swiperSlide },
  mounted () { },
  data () {
    return {
      oldSlide: null,
      activeIndex: 0,
      timeOption: {
        notNextTick: true,
        noSwiping: true,
        slidesPerView: 7
        // navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }
      },
      pictureOption: {
        notNextTick: true,
        noSwiping: true,
        spaceBetween: 30,
        slidesPerView: 2,
        centeredSlides: true,
        slidesOffsetBefore: 15, // 距离
        slidesOffsetAfter: 15, // 距离
        navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
        on: {
          slideChangeTransitionEnd: () => {
            // 1. 获取当前选中的图片 Swier 的 index
            const index = this.picSwiper.activeIndex;
            this.activeIndex = index;
            this.timeSwiper.slideTo(index);
            // if (this.oldSlide) { // 若为空则先取
            //   // 不为空先把老的类名去掉
            //   console.log(this.oldSlide.className)
            //   console.log('进入if', this.oldSlide)
            //   const classAtr = this.oldSlide.getAttribute('class')
            //   console.log(classAtr)
            //   const newClass = classAtr.replace(' active-nav', ' ')
            //   this.oldSlide.className = newClass
            // }
            // // 新的加上类名存入老的
            // this.timeSwiper.slides[index].className += ' active-nav'
            // this.oldSlide = this.timeSwiper.slides[index]
          }
        }
      },
      times: [
        { time: 'XXXX1', img_url: require('../assets/images/about/history/about_history_content_img1.png'), event: '事件详情，事件详情，事件详情' },
        { time: 'XXXX2', img_url: require('../assets/images/about/history/about_history_content_img1.png'), event: '事件详情，事件详情，事件详情' },
        { time: 'XXXX3', img_url: require('../assets/images/about/history/about_history_content_img1.png'), event: '事件详情，事件详情，事件详情' },
        { time: 'XXXX4', img_url: require('../assets/images/about/history/about_history_content_img1.png'), event: '事件详情，事件详情，事件详情' },
        { time: 'XXXX5', img_url: require('../assets/images/about/history/about_history_content_img1.png'), event: '事件详情，事件详情，事件详情' },
        { time: 'XXXX6', img_url: require('../assets/images/about/history/about_history_content_img1.png'), event: '事件详情，事件详情，事件详情' },
        { time: 'XXXX7', img_url: require('../assets/images/about/history/about_history_content_img1.png'), event: '事件详情，事件详情，事件详情' },
        { time: 'XXXX8', img_url: require('../assets/images/about/history/about_history_content_img1.png'), event: '事件详情，事件详情，事件详情' }
      ]
    };
  },
  methods: {
    /**
     * @param {Number} index time盒子当前点击的 slide 索引
     */
    handleClickTimeSlide (index) {
      console.log(this.timeSwiper);
      // console.log('index', index)
      this.activeIndex = index;
      this.timeSwiper.activeIndex = index;
      this.picSwiper.slideTo(index, 1000);
    }
  },
  computed: {
    timeSwiper () { return this.$refs.myTime.swiper; },
    picSwiper () { return this.$refs.myPicture.swiper; }
  }
};
</script>

<style lang='scss' scoped>
.my-timer {
  // 最外层的盒子撑起整个组件的宽高
  width: 100%;
  .time-box {
    position: relative;
    width: 60%;
    margin: 0 auto;
    #time {
      .swiper-wrapper {
        .swiper-slide {
          cursor: pointer;
          height: 80px;
        }

        .swiper-slide {
          .point-box {
            position: relative;
            margin: 0 auto;
            width: 50px;
            height: 100%;
            background-color: #f4f4f4;
          }

          .text {
            position: absolute;
            top: 15%;
            z-index: 1;
            left: 50%;
            transform: translate(-50%, -0%);
          }

          // 圆定位
          span {
            position: relative;
            top: 60%;
            left: 50%;
            transform: translate(-50%, -0%);
            // display: block;
            width: 20px;
            height: 20px;

            &:before,
            &:after {
              // 圆心
              display: block;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              content: '';
              border-radius: 50%;
            }

            &:before {
              // 圆心
              width: 10px;
              height: 10px;
              background-color: #ac0000;
              display: none;
            }

            &:after {
              // 圆外圈
              width: 20px;
              height: 20px;
              border: 1px solid #ccc;
            }
          }
        }

        .active-nav {
          .text {
            font-size: 26px;
            top: 0;
            color: #c30d23;
          }

          span {
            &:before {
              display: block;
            }

            &:after {
              width: 30px;
              height: 30px;
              border: 1px solid #c30d23;
            }
          }
        }
      }
    }
  }
  #picture {
    // 最外层的盒子撑起整个组件的宽高
    width: 90%;
    margin: 0 auto;

    .swiper-wrapper {
      .swiper-slide {
        color: #fff;

        img {
          width: 100%;
          background-size: cover;
        }

        .msg {
          position: absolute;
          bottom: 0;
          width: 100%;
          left: 0;
          padding: 10px;
          box-sizing: border-box;
          background-color: rgba(0, 0, 0, 0.4);

          .title {
            font-size: 20px;
          }

          .content {
            font-size: 16px;
          }
        }
      }

      // 遮罩层
      .swiper-slide-prev:after,
      .swiper-slide-next:after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.5);
      }
    }
  }
}
.line {
  width: 90%;
  height: 20px;
  background-image: linear-gradient(
    to right,
    #000 0%,
    #000 1%,
    transparent 10%
  );
  background-size: 10px 15px;
  background-repeat: repeat-x;
}
.line {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 0%);
  // z-index: -1;
}
// 左右按钮样式
.swiper-button-next,
.swiper-button-prev {
  background-image: none;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  transition: 0.5s;
  transform: translateY(40%) rotate(-45deg);
}

.swiper-button-next {
  border-right: 4px solid #fff;
  border-bottom: 4px solid #fff;
}

.swiper-button-prev {
  border-left: 4px solid #fff;
  border-top: 4px solid #fff;
}
</style>
